// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.

/**
 * Manages tabs behavior for 'theme_rlmaster' admin settings
 *
 * @package   theme-rlmaster
 * @author    Amy Groshek <amy@remote-learner.net>
 * @copyright 2013 Remote Learner  http://www.remote-learner.net/
 * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

/**
 * Manage missing objects if necessary
 */
if (!M) {
    M = {};
}

if (!M.theme) {
    M.theme = {};
}

if (!M.theme.rlmaster) {
    M.theme.rlmaster = {};
}

M.theme.rlmaster.listen_color_collapse = {
    // Click event, show selected, hide others
    onclick: function(Y) {
        var $targets = Y.all('div.color_settings h3');
        $targets.on('click', function(e) {
            e.preventDefault();
            // Store target and current state coordinates
            $target = e.target;
            $expandedY = Y.one('div.color_settings h3.expanded') ? Y.one('div.color_settings h3.expanded').getY() : 0;
            $targetY = $target.getY();
            Y.use('node', 'transition', 'anim', function(Y) {
                if ($target.hasClass('collapsed')) {
                    // Event target is collapsed, we need 1) collapse expanded 2) expand new content
                    if (Y.one('div.color_settings h3.expanded')) {
                        // Collapse expanded
                        Y.one('div.color_settings h3.expanded')
                            .removeClass('expanded')
                            .addClass('collapsed')
                            .setAttribute('aria-selected', 'false')
                            .next()
                            .transition({
                                    easing: 'ease-out',
                                    duration: 0.75, // seconds
                                    opacity: 0
                                }, function() {
                                    this.setStyle('display', 'none')
                                    .removeClass('expanded')
                                    .addClass('collapsed')
                                    .setAttribute('aria-expanded', 'false')
                                    .setAttribute('aria-hidden', 'true');

                                    // Expand new content
                                    $target
                                        .removeClass('collapsed')
                                        .addClass('expanded')
                                        .setAttribute('aria-selected', 'true')
                                        .next()
                                        .show(true)
                                        .removeClass('collapsed')
                                        .addClass('expanded')
                                        .setAttribute('aria-expanded', 'true')
                                        .setAttribute('aria-hidden', 'false');

                                        // Prevent bottom of page exposure when long content is collapsed
                                        if ($targetY > $expandedY) {
                                            $previousY = $target.previous('div.color_settings h3') ? $target.previous('div.color_settings h3').getY() : 0;
                                            var anim = new Y.Anim({
                                              duration: 0.25,
                                              node: 'win',
                                              easing: 'easeBoth',
                                              to: {
                                                scroll: [0, $previousY]
                                              }
                                            });
                                            anim.run();
                                        }
                                });
                    } else {
                        // No expanded content, only expand the new content
                        $target
                            .removeClass('collapsed')
                            .addClass('expanded')
                            .setAttribute('aria-selected', 'true')
                            .next()
                            .show(true)
                            .removeClass('collapsed')
                            .addClass('expanded')
                            .setAttribute('aria-expanded', 'true')
                            .setAttribute('aria-hidden', 'false');
                    }
                } else {
                    // Event target is expanded, we only need to collapse it
                    Y.one('div.color_settings h3.expanded')
                        .removeClass('expanded')
                        .addClass('collapsed')
                        .setAttribute('aria-selected', 'false')
                        .next()
                        .hide(true)
                        .removeClass('expanded')
                        .addClass('collapsed')
                        .setAttribute('aria-expanded', 'false')
                        .setAttribute('aria-hidden', 'true');
                }
            });
        });
    },
    // Init listeners
    init: function(Y) {
        this.onclick(Y);
    }
};
